import { usePersonStore } from '@/store/person'

const DemoTwo: React.FC<unknown> = () => {
  const firstName = usePersonStore((state) => state.firstName)
  const updateFirstName = usePersonStore((state) => state.updateFirstName)
  return (
    <main>
      <label htmlFor="firstName">
        First name:
        <input
          type="text"
          name="firstName"
          onChange={(e) => updateFirstName(e.currentTarget.value)}
          value={firstName}
        />
      </label>

      <p>
        Hello, <strong>{firstName}!</strong>
      </p>
    </main>
  )
}

export default DemoTwo
